<template>
  <span>
    <span v-if="state.labelType == 'span'" class="big-fonts" :id="state.prop">{{ state.num }}</span>
    <el-link v-else class="big-font" :id="state.prop" :underline="false">
      {{ state.num }}
    </el-link>
  </span>
</template>

<script lang="ts" setup>
import { reactive, defineProps, onMounted, getCurrentInstance, nextTick, watch } from 'vue'
import { CountUp } from 'countup.js'

const { proxy }: any = getCurrentInstance()
const props = defineProps({
  num: {
    type: Number,
    default: 0,
  },
  prop: {
    type: String,
    default: '',
  },
  options: {
    type: Object,
    default: {
      useEasing: true, // 过渡动画效果，默认ture
      useGrouping: true, // 千分位效果，例：1000->1,000。默认true
      separator: ',', // 使用千分位时分割符号
      decimal: '.', // 小数位分割符号
      prefix: '', // 前置符号
      suffix: '', // 后置符号，可汉字
      decimalPlaces: 2,
    },
  },
  labelType: {
    type: String,
    default: 'default',
  },
})

const state = reactive({
  num: 0,
  prop: '',
  options: {},
  labelType: '',
})

const _init = () => {
  state.num = props.num
  state.prop = props.prop
  state.options = props.options
  state.labelType = props.labelType
  initNumCountUp()
}

const initNumCountUp = () => {
  if (proxy.$wigem.isEmpty(state.num) || proxy.$wigem.isEmpty(state.prop)) {
    return
  }
  if (proxy.$wigem.isEmpty(state.prop)) {
    new CountUp(state.prop, state.num).start()
    return
  }
  if (state.prop.slice(-3) == 'Acc') {
    new CountUp(state.prop, state.num, state.options).start()
  } else {
    new CountUp(state.prop, state.num).start()
  }
}

onMounted(() => {
  _init()
})
watch(
  () => props.num,
  () => {
    _init()
  }
)
</script>
<style>
.big-font {
  font-size: 36px;
  color: #666;
  line-height: 36px;
  padding: 5px 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
.big-fonts {
  font-size: 36px;
  color: #666;
  padding: 5px 0 10px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}
</style>
